<template>
	<view>
		<!-- 顶部搜索栏 -->
		<van-search v-model="value" placeholder="请输入搜索关键词" use-action-slot @search="onSearch" class="research" @focus="isGetFocus=true"
		 @blur="isGetFocus=false">
			<view slot="action" @tap="onCancel" v-if="isGetFocus">取消</view>
		</van-search>
		<!-- 顶部导航栏 -->
		<van-tabs style="width: 100%;position: fixed;top: 100rpx;z-index: 1;" @change="changeActive" :active="active">
			<van-tab :title="item.name" v-for="(item,index) in typeList" :key="index">
				<!-- 商品信息 -->
				<view class="out-border-line flex-just" v-for="(item2,index2) in commodityList" :key="index2" @click="turnCommodityDetail(item2.id)">
					<van-card :price="item2.price" :desc="item2.description" :title="item2.name" :thumb="item2.picture" class="text-cut"></van-card>
					<view class="stepper-box">
						<text>库存：{{item2.total}}</text>
						<!-- <view class='flex-row'>
							<image class="icon" src="/static/corporation/groceryStore/shopcar.png" @click="addShoppingCar(index2)"></image>
							<van-stepper :value="1" integer @change="stepperChange" :data-name="index2" :max="item2.total" />
						</view> -->
						<image class="icon" src="/static/corporation/groceryStore/shopcar.png" @click.stop="addShoppingCar(item2.id)"></image>
					</view>
				</view>
			</van-tab>
		</van-tabs>

       <view class="round-box column-middle" @click="turnShopcar()">
		   <image class="shopcarIcon" src="/static/corporation/groceryStore/shopcarbig.png"></image>
	   </view>
	</view>
</template>

<script>
	import {
		getCommodityType,
		getCommodityByType,
		getCommodityByKeyword
	} from '@/common/api/groceryStore/groceryStore.js'
	import {
		addShoppingCar
	} from '@/common/api/groceryStore/shopcar.js'
	export default {
		data() {
			return {
				isGetFocus: false,
				// 导航栏选择的是第几个
				typeList: [],
				commodityList: [],
				value: '',
				active: 0,
				map: new Map()
			}
		},
		methods: {
			// 切换上面的导航栏时
			changeActive: function(e) {
				var that = this
				this.typeList.forEach(function(item, index) {
					if (e.detail.name == index) {
						if (item.status == 0) {
							uni.showToast({
								title: '商品已售罄'
							})
							return
						} else {
							that.getCommodityByType(item.id)
						}
					}
				})
				console.log("标志符" + this.active)
			},
			// 获取导航栏的标题
			getCommodityType: function() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})
				getCommodityType(uni.getStorageSync("clubId"), {
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data != null) {
							if (res.data.data.list != null) {
								that.typeList.push({
									id: 0,
									name: '首页'
								})
								res.data.data.list.forEach(function(item, index) {
									that.typeList.push(item)
								})
								// 先默认获取全部的商品信息
								this.getCommodityByType(0)
								uni.hideLoading()
							} else{
								uni.showToast({
									title: '暂无数据',
									icon: 'none'
								})
							}
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 通过typeId获取商品列表
			getCommodityByType: function(typeId) {
				uni.showLoading({
					title: '加载中'
				})
				getCommodityByType(uni.getStorageSync("clubId"), typeId, {
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.list.length != 0) {
							this.commodityList = res.data.data.list
						} else {
							this.commodityList = []
							uni.showToast({
								title: '暂时没有商品',
								icon: 'none'
							})
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 通过搜索框输入关键字出来相关商品
			onSearch: function(e) {
				// 去掉输入的空格
				uni.showLoading({
					title: "加载中"
				})
				let keyword = e.detail.replace(/\s/g, "")
				getCommodityByKeyword(uni.getStorageSync("clubId"), {
					status: 1,
					pageNum: 1,
					pageSize: 10,
					keyWord: keyword
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.list.length != 0) {
							this.commodityList = res.data.data.list
							this.active = 0
							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: "暂无该数据，请重新输入关键字",
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					}
				})
			},
			// 跳转到商品详情
			turnCommodityDetail: function(goodsId){
				uni.navigateTo({
					url: '/pagesA/pages/groceryStore/commodityDetail/commodityDetail?goodsId=' + goodsId
				})
			},
			// 添加到购物车
			addShoppingCar: function(goodsId) {
				// 通过相同的index值遍历商品列表的才能获取是拿的那个
				addShoppingCar({
					goodsId: goodsId,
					memberId: uni.getStorageSync("memberId"),
					total: 1
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '成功添加到购物车'
						})
					} else {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				})
			},
			// 跳转到购物车
			turnShopcar:function(){
				uni.navigateTo({
					url: '/pagesA/pages/groceryStore/shopingCar/shopingCar'
				})
			}
		},
		onLoad() {
			this.getCommodityType()
		}
	}
</script>

<style>
	.sidebar-position {
		position: relative;
		top: 100rpx;
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		right: 40rpx;
		bottom: 30rpx;
	}

	.shopcar-position {
		height: 80rpx;
		justify-content: flex-end;
	}

	.van-card-css {
		width: 100%;
		margin-bottom: 15rpx;
	}

	/* 卡片的box */
	.card-box {
		width: 65%;
		height: 100%;
	}

	/* 右侧的右上角的价钱和右下角的步进器 */
	.stepper-box {
		width: 35%;
		position: relative;
		border-bottom: 1px solid #FFFFFF;
	}

	.stepper-box text {
		position: absolute;
		right: 40rpx;
		color: #999999;
		top: 20rpx;
	}

	.stepper-box van-stepper {
		position: absolute;
		bottom: 30rpx;
		right: 10rpx;
	}
	/* 跳转到购物车 */
	.round-box{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 0 3px 3px #53A4FC;
		position: fixed;
		left: 8%;
		bottom: 5%;
		z-index: 1;
	}
	.shopcarIcon{
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}
</style>
